<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Cache-Control" content="no-transform" />
		<title>1xyHome - 租房网</title>
		<link href="../css/layout.css" rel="stylesheet" />
		<link href="../css/1xyHome_index.css" rel="stylesheet" />
		<link href="../css/home.css" rel="stylesheet" />
	</head>

	<body>
		<div class="t_img">
			<img src="../img/t_img.jpg">
		</div>
		<div class="wrap">

			<!--
            	作者：helloworld_ldf@126.com
            	时间：2017-04-11
            	描述：城市二级关联
            -->
			<div class="city">
				<div class="l">点击进入
					<a href="http://beijing.zufang.com">北京站</a>
				</div>
				<div class="r">
					<span>按省份选择：</span>
					<b>
						<i></i><span>选择省份</span>
						<ul id='province_ul' style=" height: 300px; overflow: auto;z-index: 10">
						</ul>
					</b>
					<b>
						<i></i><span>选择城市</span>
						<ul id="citys">
						</ul>
					</b>
					<a id="btn1" href="javascript:void(0)" class="btn">确定</a>
				</div>
			</div>

			<!--
            	作者：helloworld_ldf@126.com
            	时间：2017-04-11
            	描述：热门城市
            -->
			<div class="hot">
				热门城市：
				<a href="http://bj.zufang.com">北京</a>
				<a href="http://gz.zufang.com">广州</a>
				<a href="http://sh.zufang.com">上海</a>
				<a href="http://sz.zufang.com">深圳</a>
				<a href="http://tj.zufang.com">天津</a>
				<a href="http://cd.zufang.com">成都</a>
				<a href="http://hz.zufang.com">杭州</a>
				<a href="http://xa.zufang.com">西安</a>
				<a href="http://wh.zufang.com">武汉</a>
				<a href="http://cs.zufang.com">长沙</a>
				<a href="http://fz.zufang.com">福州</a>
			</div>

			<!--
            	作者：helloworld_ldf@126.com
            	时间：2017-04-11
            	描述：左右tab
            -->
			<ul id="tab">
				<li class="cur">按省份选择<i></i></li>
				<li>按拼音首字母选择<i></i></li>
			</ul>

			<!--
            	作者：helloworld_ldf@126.com
            	时间：2017-04-11
            	描述：按省份选择
            -->
			<div id='ct1' class="ct" style="display:block">
				<!--<dl>
					<dt><i>A</i></dt>
					<dd><b>澳门</b><i>
                        <a   href="http://aomen.zufang.com">澳门</a>
                    </i></dd>
				</dl>-->
			</div>

			<!--
            	作者：helloworld_ldf@126.com
            	时间：2017-04-11
            	描述：按拼音首字母选择
            -->
			<div id='ct2' class="ct">
				<!--<dl>
					<dt><i>A</i></dt>
					<dd><i>
						<a  href="http://anshun.zufang.com">安顺</a>
					</i></dd>
				</dl>-->
			</div>

		</div>

		<div class="footer_index layout">
			<script src="http://static.zufang.com/zu_assets/js/jquery.min.js" type="text/javascript"></script>
			<!-- footer -->
			<div class="content layout">
				<div class="wrap1">

					<!--
                    	作者：helloworld_ldf@126.com
                    	时间：2017-04-11
                    	描述：再来个热门城市
                    -->
					<h2 class="main-title2">
	          			<strong>热门城市：</strong>
	                    <a href="http://bj.zufang.com">北京租房</a>&#12288;
	                    <a href="http://gz.zufang.com">广州租房</a>&#12288;
	                    <a href="http://sh.zufang.com">上海租房</a>&#12288;
	                    <a href="http://sz.zufang.com">深圳租房</a>&#12288;
	                    <a href="http://tj.zufang.com">天津租房</a>&#12288;
	                    <a href="http://cd.zufang.com">成都租房</a>&#12288;
	                    <a href="http://hz.zufang.com">杭州租房</a>&#12288;
	                    <a href="http://xa.zufang.com">西安租房</a>&#12288;
	                    <a href="http://wh.zufang.com">武汉租房</a>&#12288;
	                    <a href="http://cs.zufang.com">长沙租房</a>&#12288;
	                    <a href="http://fz.zufang.com">福州租房</a>&#12288;
	                </h2>

					<!--
                    	作者：helloworld_ldf@126.com
                    	时间：2017-04-11
                    	描述：友情链接
                    -->
					<ul class="mod_list_6">
						<li>友情链接：</li>
						<li>
							<a href="http://www.hizhu.com">嗨住租房</a>
						</li>
						<li>
							<a href="http://zhongshan.jianzhimao.com">中山兼职</a>
						</li>
						<li>
							<a href="http://www.muniao.com/meishan/">眉山短租房</a>
						</li>
						<div class="clearfix"></div>
					</ul>
					<div class="clearfix"></div>
				</div>
				<div class="clearfix"></div>
			</div>

			<!--
            	作者：helloworld_ldf@126.com
            	时间：2017-04-11
            	描述：底部版权
            -->
			<div class="footer_index layout">
				<div class="footer-content black12px">
					<a href="http://www.zufang.com/home/about/zf/">关于租房</a> |
					<a href="http://www.zufang.com/home/about/wh/">企业文化</a> |
					<a href="http://www.zufang.com/home/about/hb/">合作伙伴</a> |
					<a href="http://www.zufang.com/home/about/we/">联系我们</a> |
					<a href="http://www.zufang.com/home/about/hz/">市场合作</a><br /> 客服热线： 京ICP备12044770号-2 Copyright&copy;2014 www.zufang.com All Rights Reserved
				</div>
			</div>
	</body>

</html>

<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/pinyin_dict_firstletter.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/pinyinUtil.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(document).ready(function() {
		init_city2();
		init_ct1();
		init_ct2();
		init_animation();
	});

	//  ========== 
	//  = 初始化CSS动画 = 
	//  ========== 
	function init_animation() {
		var city = $('.city');

		//  ========== 
		//  = 省市/二级级联 = 
		//  ========== 
		city.on('mouseover', 'b', function() {
			$(this).find('ul').stop(true, true).slideDown();
		}).on('mouseout', 'b', function() {
			$(this).find('ul').stop(true, true).slideUp();
		});
		city.on('mouseover', 'ul', function() {
			$(this).stop(true, true).slideDown();
		}).on('mouseout', 'ul', function() {
			$(this).stop(true, true).slideUp();
		});

		//  ========== 
		//  = 点击省份事件 = 
		//  ========== 
		city.on('click', 'li', function() {
			$(this).parents('b').find('span').text(
				$(this).text()
			);
			$(this).parent('ul').hide();
		});

		//  ========== 
		//  = 左右tab选项卡 = 
		//  ========== 
		city.on('mouseover', 'li', function() {
			$(this).addClass('cur');
		}).on('mouseout', 'li', function() {
			$(this).removeClass('cur');
		});
		$('#tab>li').on('mouseover', function() {
			$(this).addClass('cur').siblings('li').removeClass('cur');
			$('div.ct').eq($(this).index()).show().siblings('div.ct').hide();
		});

		//  ========== 
		//  = 左边标签动画 = 
		//  ========== 
		$('.ct>dl').on('mouseover', function() {
			$(this).addClass('bg');
		}).on('mouseout', function() {
			$(this).removeClass('bg');
		});
	}

	//  ========== 
	//  = 初始化 按省份选择 = 
	//  ========== 
	function init_ct1() {
		for(var i = 0; i < 26; i++) {
			var tempCode = String.fromCharCode((65 + i)); // 当前大写字母
			var existed = false; // false代表不存在

			$.each(cityData3, function(i, province) {
				if(pinyinUtil.getFirstLetter(province.text, '2')[0].substring(0, 1) != tempCode) { return true } // 不符合
				var dl1 = '\<dl><dt>' + (existed ? '' : '<i>' + tempCode + '</i>') + '</dt>';
				dl1 += '<dd><b>' + province.text + '</b><i>';
				$.each(province.children, function(i, city) {
					dl1 += '<a href="#">' + city.text + '</a>';
				});

				dl1 += '</i></dd> </dl>';

				$('#ct1').append(dl1);
				existed = true;
			});
		}
	}

	//  ========== 
	//  = 初始化 按拼音字母 = 
	//  ========== 
	function init_ct2() {
		for(var i = 0; i < 26; i++) {
			var tempCode = String.fromCharCode((65 + i)); // 当前大写字母
			var existed = false; // false代表不存在

			var dl1 = null;

			$.each(cityData3, function(j, province) {
				$.each(province.children, function(k, city) {
					if(pinyinUtil.getFirstLetter(city.text, '2')[0].substring(0, 1) != tempCode) { return true } // 不符合
					if(!existed) {
						dl1 = '\<dl><dt><i>' + tempCode + '</i></dt>';
						dl1 += '<dd><i>';
					}
					dl1 += '<a href="#">' + city.text + '</a>';

					existed = true;
				});
			});

			if(existed) {
				dl1 += '</i></dd> </dl>';
				$('#ct2').append(dl1);
			}
		}
	}

	//  ========== 
	//  = 初始化 省市 二级级联菜单 = 
	//  ========== 
	function init_city2() {
		$.each(cityData3, function(i, province) {
			var li = '<li onclick="getCitys(' + province.value + ')">' + province.text + '</li>';
			$('#province_ul').append(li);
		});
	}

	//  ========== 
	//  = 二级级联 实现 = 
	//  ========== 
	function getCitys(p_value) {
		$('#citys>li').remove();
		$.each(cityData3, function(i, province) {
			if(province.value == p_value) {
				$.each(province.children, function(i, city) {
					var li = '<li value="' + province.value + '">' + city.text + '</li>';
					$('#citys').append(li);
				});
				return false;
			}
		});
	}
</script>